<template>
  <div>
    <el-row>
      <el-col :span="8" v-for="(item, index) in dingdanArr" :key="index">
        <div class="grid-content bg-purple dingdanArr-list">
          <img :src="item.img" />
          <div class="dingdanArrText">
            <div>
              {{ item.name }}
            </div>
            <div>
              {{ item.price }}
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="waitshiwu">
      <div class="waitshiwuTitle">待处理事务</div>
      <div class="waitshiwuBody">
        <ul>
          <li v-for="item in shiwu" :key="item.num">
            <div>{{ item.name }}</div>
            <span>({{ item.num }})</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="zonglan">
      <div class="shopzonglan">
        <div class="shopzonglanTitle">商品总览</div>
        <div class="shopzonglanBody">
          <ul>
            <li v-for="item in shopzonglan" :key="item.name">
              <div>{{ item.num }}</div>
              <div>{{ item.name }}</div>
            </li>
          </ul>
        </div>
      </div>
      <div class="userzonglan">
        <div class="userzonglanTitle">用户总览</div>
        <div class="userzonglanBody">
          <ul>
            <li v-for="item in userzonglan" :key="item.name">
              <div>{{ item.num }}</div>
              <div>{{ item.name }}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="Statistics">
      <div class="StatisticsTitle">订单统计</div>
      <div class="StatisticsBody">
        <div class="StatisticsBodyL">
          <ul>
            <li v-for="item in StatisticsBodyL" :key="item.num">
              <div>{{ item.name }}</div>
              <div>{{ item.num }}</div>
              <div>
                <span class="green" v-if="item.type === '+'"
                  >{{ item.type }}{{ item.number }}</span
                >
                <span class="red" v-else>{{ item.type }}{{ item.number }}</span>
                同比上月
              </div>
            </li>
          </ul>
        </div>
        <div class="StatisticsBodyR">
          <div id="chart_example"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const echarts = require("echarts");

export default {
  name: "home",
  data: function () {
    return {
      dingdanArr: [
        {
          id: 1,
          name: "今日订单总数",
          price: "200",
          //在 js里面获取 vue项目的本地图片 ，需要使用  require
          img: require("@/assets/images/home_order.png"),
        },
        {
          id: 2,
          name: "今日订单总数1",
          price: "300",
          img: require("@/assets/images/home_order.png"),
        },
        {
          id: 3,
          name: "今日订单总数2",
          price: "400",
          img: require("@/assets/images/home_order.png"),
        },
      ],
      shiwu: [
        {
          name: "待付款订单",
          num: 10,
        },
        {
          name: "已完成订单",
          num: 5,
        },
        {
          name: "待确认收货订单",
          num: 20,
        },
        {
          name: "待发货订单",
          num: 30,
        },
        {
          name: "新缺货订单",
          num: 6,
        },
        {
          name: "待处理退款申请",
          num: 8,
        },
        {
          name: "已发货订单",
          num: 12,
        },
        {
          name: "待处理退货订单",
          num: 9,
        },
        {
          name: "广告位即将到期",
          num: 10,
        },
      ],
      shopzonglan: [
        {
          name: "已下架",
          num: 100,
        },
        {
          name: "已上架",
          num: 400,
        },
        {
          name: "库存紧张",
          num: 50,
        },
        {
          name: "全部商品",
          num: 500,
        },
      ],
      userzonglan: [
        {
          name: "今日新增",
          num: 100,
        },
        {
          name: "昨日新增",
          num: 200,
        },
        {
          name: "本月新增",
          num: 1000,
        },
        {
          name: "会员总数",
          num: 5000,
        },
      ],
      StatisticsBodyL: [
        {
          name: "本月订单统计",
          num: 10000,
          type: "+",
          number: 10,
        },
        {
          name: "本周订单总数",
          num: 1000,
          type: "-",
          number: 10,
        },
        {
          name: "本月销售总额",
          num: 100000,
          type: "+",
          number: 10,
        },
        {
          name: "本周销售总额",
          num: 50000,
          type: "-",
          number: 10,
        },
      ],
    };
  },
  mounted() {
    // let this_ = this;
    let myChart = echarts.init(document.getElementById("chart_example"));
    let option;
    option = {
      title: {
        text: "订单统计",
        subtext: "订单数据饼状图",
        left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        left: "left",
      },
      series: [
        {
          name: "访问来源",
          type: "pie",
          radius: "50%",
          data: [
            { value: 10000, name: "本月订单统计" },
            { value: 1000, name: "本周订单总数" },
            { value: 100000, name: "本月销售总额" },
            { value: 50000, name: "本周销售总额" },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };

    // let option = {
    //   color: ['#f44'],
    //   tooltip : {
    //     trigger: 'axis',
    //     axisPointer : {
    //       type : 'shadow'
    //     }
    //   },
    //   xAxis : [
    //     {
    //       type : 'category',
    //       data : ["本月订单统计","本周订单总数","本月销售总额","本周销售总额"],
    //       axisTick: {
    //         alignWithLabel: true
    //       }
    //     }
    //   ],
    //   yAxis : [
    //     {
    //       type : 'value'
    //     }
    //   ],
    //   series : [
    //     {
    //       name:'总计',
    //       type:'bar',
    //       barWidth: '60%',
    //       data:[10000,1000,100000,50000]
    //     }
    //   ]
    // };
    myChart.setOption(option);

    //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  },
};
</script>

<style>
.dingdanArr-list {
  width: 362px;
  border: 1px solid #ccc;
  border-radius: 5px;
  height: 60px;
  padding-top: 10px;
  display: flex;
  justify-content: space-around;
  margin: 10px;
}

.dingdanArr-list img {
  width: 50px;
  height: 50px;
}

.dingdanArrText {
  text-align: left;
}

.waitshiwu,
.Statistics {
  margin: 0 10px;
  margin-bottom: 10px;
  border: 1px solid rgb(220, 223, 230);
}

.waitshiwuTitle {
  background-color: rgb(242, 246, 252);
  text-align: left;
  padding-left: 10px;
  line-height: 40px;
  vertical-align: middle;
  height: 40px;
}

.waitshiwuBody {
  margin-bottom: 25px;
  padding: 0 30px;
}

.waitshiwuBody ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.waitshiwuBody ul li {
  width: 30%;
  height: 40px;
  border-bottom: 1px solid rgb(235, 238, 245);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.waitshiwuBody ul li span {
  color: rgb(245, 108, 108);
}
.zonglan {
  margin: 0 10px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}

.userzonglan,
.shopzonglan {
  width: 49%;
  border: 1px solid rgb(220, 223, 230);
}

.shopzonglanTitle,
.userzonglanTitle {
  background-color: rgb(242, 246, 252);
  text-align: left;
  padding-left: 10px;
  line-height: 40px;
  vertical-align: middle;
  height: 40px;
}

.shopzonglanBody,
.userzonglanBody {
  display: flex;
  justify-content: center;
}

.shopzonglanBody ul,
.userzonglanBody ul {
  display: flex;
}

.shopzonglanBody ul li,
.userzonglanBody ul li {
  padding-top: 30px;
  margin: 0 35px;
  height: 80px;
}

.shopzonglanBody ul li div:first-child,
.userzonglanBody ul li div:first-child {
  color: rgb(245, 108, 108);
}

.StatisticsTitle {
  background-color: rgb(242, 246, 252);
  text-align: left;
  padding-left: 10px;
  line-height: 40px;
  vertical-align: middle;
  height: 40px;
}

.StatisticsBody {
  display: flex;
}

.StatisticsBodyL {
  padding: 15px 15px 15px 15px;
  width: 180px;
  border-right: 1px solid rgb(220, 223, 230);
}

.StatisticsBodyL ul li {
  text-align: left;
  margin-bottom: 10px;
}

.StatisticsBodyL ul li div:nth-child(2) {
  font-size: 20px;
  margin-bottom: 5px;
}

.green {
  color: green;
}

.red {
  color: red;
}

#chart_example {
  width: 916px;
  height: 350px;
}
</style>